﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Superman</title>
	<style>
	#gb_c{
		
	}
	b{
		display:block;
		transition:all 0.8s linear 0.2s;
		width:2em;
	}
	.content:hover b{
		transform:rotate(360deg);
	}
	</style>
</head>
<body>
	<div class='content'>
		<div><b>Go!</b></div>
		<canvas id="gb_c" width="500" height="300" title='我就是 canvas'>123</canvas>
		<div>请用“↑↓←→”控制移动</div>
	</div>
	
	<script>
	//看你妹 程序
	var arr = ['你','妹','啊','烽','火'],
	i=0;
	var gb_c = document.getElementById('gb_c');
	var b = document.getElementsByTagName('b')[0];
	gb_c.onmouseover=function(){
		b.innerHTML=arr[i];
		i++;
		if(i>=arr.length){			
			i=0;
		}
	}
	</script>
</body>
	<script> //超人_上下左右 程序
	var canv = document.getElementById('gb_c');
	ctx = canv.getContext('2d'); //画布对象
	ctx.dw_bg = function(){
		var x=600,y=480,color='#fc0';
		this.fillStyle=color;
		this.fillRect(0,0,x,y);
		this.beginPath();
		this.moveTo(100, 200);
		//this.quadraticCurveTo(150, 50, 200, 200);
		this.bezierCurveTo(140, 10, 388, 10, 388, 170);
		//相对于二次曲线，这里增加了一个控制点来生成更复杂的曲线类型
    	this.lineCap = 'butt'; //绘制类型butt  round  square
		this.lineWidth = 16;
		this.strokeStyle = '#DD4814';
		this.stroke();
	}
	ctx.dw_bg();

	//图片对象
	var hpm = new Image();
	hpm.src='http://img.taopic.com/uploads/allimg/130725/318765-130H50T25981.jpg';
	hpm.onload=function(){ //加载时候就画	 	
		hpm.drawImg(0,0);
	}


	document.onkeydown=function(e){
		if(e.keyCode==39){
			hpm.move_right(6);
		}else if(e.keyCode==37){
			hpm.move_left(6);
		}else if(e.keyCode==38){
			hpm.move_up(6);
		}else if(e.keyCode==40){
			hpm.move_down(6);
		}
		//console.log([s_a,v_a]);
	}

	s_a = 0,v_a=0;
	hpm.move_right = function(p){
		this.drawImg(s_a+p ,v_a );
		s_a=s_a+p;
	}
	hpm.move_left = function(p){
		this.drawImg(s_a-p ,v_a );
		s_a=s_a-p;
	}
	hpm.move_left = function(p){
		this.drawImg(s_a-p ,v_a );
		s_a=s_a-p;
	}
	hpm.move_up = function(p){
		this.drawImg(s_a,v_a-p );
		v_a=v_a-p;
	}
	hpm.move_down = function(p){
		this.drawImg(s_a,v_a+p );
		v_a=v_a+p;
	}
	hpm.drawImg=function(x,y){	
		ctx.dw_bg();
		ctx.drawImage( this ,x ,y ,this.width*0.08,this.height*0.08);
	}
	</script>
</html>